<template>
	<view>
		<view class="help-pubuBox">
			<u-search placeholder="请输入人员姓名" :clearabled="true" v-model="title" @change="chaxun" @search="chaxun"
				@custom="chaxun" :showAction="false" height="40" shape="square" color="#2B2B2B"></u-search>
		</view>
		<view class="search-list">
			<view class="list-cell" v-for="(cell, i) in itemArr" :key="cell.id" @click="changeSelectItem(cell)">
				<view class="iconfont"
					:class="[selectItem.id==cell.id?'icon-app-danxuangouxuan select-bg':'icon-app-danxuanweixuan unselect-bg']">
				</view>
				<view class="left-icon">
					<image v-if="cell.portrait" :src="cell.portrait"></image>
					<view v-if="!cell.portrait" class="defalut-icon">{{getName(cell.realName)}}</view>
					<view class="txt-content">
						<text class="txt1">{{cell.realName}}</text><text class="txt2">{{cell.positionName}}</text>
					</view>
				</view>
			</view>
			<view class="empty-data" v-if="itemArr.length==0">
				<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
			</view>
		</view>
		<u-loading-page color="#fff" bgColor='rgba(0,0,0,0.3)' :loading="loading" loading-text="已选择人员,正在跳转...">
		</u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inactiveColor: "#000000",
				activeColor: "#0F53AC",
				title: "",
				// actionStyle: {
				// 	color: '#fff',
				// 	background: '#0F53AC',
				// 	padding: '10rpx',
				// 	borderRadius: '8rpx'
				// },
				page: 1,
				comList: [],
				directorType: '',
				indexList: [],
				itemArr: [],
				allItemArr:[],
				selectItem: {},
				loading: false
			}
		},
		onLoad(option) {
			uni.$on('update', (data) => {})
			this.directorType = option.type;
			this.getPeopleList()
		},
		methods: {
			change(v) {
				this.title = v

				if (this.title == '') {
					this.getPeopleList()
				}
				// console.log("111",v)
			},
			chaxun() {
				const that = this
				if (this.title) {
					this.itemArr = this.allItemArr.filter((item, index) => {
						if (item.realName.indexOf(this.title) >= 0) {
							// this.itemArr = [
							// 	[item]
							// ];
							return true
						}
						//  else {
						// 	// this.itemArr = [];
						// 	return []
						// }
					})
				}

				if (this.title == '') {
					this.getPeopleList()
				}

				//调用接口查询
				// uni.$u.http.post(`/user/mobile/userInfo/getDirectorListByType`, params).then(res => {
				// 	console.log('res===>', res)
				// 	if (res.code == 0) {
				// 		if(res.data.length>0){
				// 			that.itemArr.push(res.data)
				// 		}
				// 	}
				// }).catch(err => {})
				// // if (!this.title) {
				// // 	return uni.showToast({
				// // 		icon: 'none',
				// // 		title: '搜索内容不能为空！'
				// // 	})
				// // }

			},
			changeSelectItem(item) {
				this.loading = true
				this.selectItem = item;

				setTimeout(() => {
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					if (this.directorType == 2) { //验证人员选中
						prevPage.$vm.wxpeopleList = item; //修改上一页data里面的地址
					}
					if (this.directorType == 4) { //维修人员选中
						prevPage.$vm.wxpeopleList = item; //修改上一页data里面的地址
					}
					if (this.directorType == 5) { //审核人员选中
						prevPage.$vm.wxpeopleList5 = item; //修改上一页data里面的地址
					}
					uni.navigateBack({
						delta: 1 //返回层数，2则上上页
					});
					this.loading = false
				}, 1000)
			},
			getPeopleList() {
				uni.$u.http.get(`/base/mobile/userDirector/getDirectorList/${this.directorType}`).then(res => {
					if (res.code == 0) {
						this.itemArr = res.data
						this.allItemArr = res.data
					}
				}).catch(err => {})
			},
			getName(name) {
				let dd = name?.substring(0, 1)
				return dd;
			}


		}
	}
</script>

<style lang="scss">
	.help-pubuBox {
		padding: 22rpx;
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9;
		/*  #ifdef H5 */
		top: 90rpx;
		/*  #endif */

		/*  #ifdef MP-WEIXIN */
		top: 0rpx;
		/*  #endif */

	}

	.search-list {
		background: #fff;
		margin-top: 130rpx;

	}

	.list-cell {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #F5F5F5;

		.left-icon {
			display: flex;
			margin-left: 20rpx;
			flex: 1;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}

			.defalut-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #4FA1FF;
				color: #fff;
			}

			.txt-content {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.txt1 {
					font-size: 34rpx;
					color: #000000;
					padding-bottom: 10rpx;
				}

				.txt2 {
					font-size: 28rpx;
					color: #8c8c8c;
				}
			}
		}

		.unselect-bg {
			margin-right: 20rpx;
			color: #ffffff;
			font-size: 48rpx;
			text-shadow: 0 1px #E0E0E0, 1px 0 #E0E0E0, -1px 0 #E0E0E0, 0 -1px #E0E0E0;
		}

		.select-bg {
			margin-right: 20rpx;
			color: #0F53AC;
			font-size: 48rpx;
			// text-shadow: 0 1px #E0E0E0, 1px 0 #E0E0E0, -1px 0 #E0E0E0, 0 -1px #E0E0E0;
		}
	}
</style>
